<template>
  <div class="detail">
    <detail-head :tripsItem="tripsItem"/>
    <detail-banner :tripsItem="tripsItem"/>
    <div style="height: 2000px;"></div>
  </div>
</template>

<script>
import DetailHead from "./detailPages/DetailHead";
import DetailBanner from "./detailPages/DetailBanner";
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      tripsItem: null,
    }
  },
  created() {
    this.tripsItem = []
    this.iid = this.$route.query.id
    console.log(this.iid)
  },
  methods: {
    getDetailInfo() {
      this.tripsItem = []
      this.$http.get('/data/home.json')
      .then((res) => {
        const data = res.data.data
        data.forEach(item => {
          item.tripsList.forEach(val => {
            // console.log(val.id)
            if(this.iid === val.id) {
              // this.imgList = val.imgList
              this.tripsItem = {
                id: val.id,
                title: val.title,
                imgList: val.imgList
              }
            }
          })
        })
      })
    }
  },
  components: {
    DetailHead,
    DetailBanner,
  },
  mounted() {
    this.getDetailInfo()
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}
</script>

<style scoped>

</style>
